<template>
  <el-card class="search-card">
    <el-form :inline="true" class="search-form">
#foreach($column in $columnData)
#if($column.propertyName != "id" &&
      $column.propertyName != "createBy" &&
      $column.propertyName != "createTime" &&
      $column.propertyName != "updateBy" &&
      $column.propertyName != "updateTime")
#if($column.propertyName == "status")
      <el-form-item label="状态">
        <el-select
            style="width: 120px"
            v-model="pageRequest.model.status"
            placeholder="请选择状态"
            clearable>
          <el-option label="启用" :value="0"></el-option>
          <el-option label="禁用" :value="1"></el-option>
        </el-select>
      </el-form-item>
#else
      <el-form-item label="$column.columnComment">
        <el-input
            @keyup.enter="search"
            placeholder="请输入$column.columnComment"
            v-model="pageRequest.model.$column.propertyName"
            clearable>
        </el-input>
      </el-form-item>
#end
#end
#end

      <el-form-item>
        <el-button type="primary" size="default" @click="search">搜索</el-button>
        <el-button type="primary" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="table-card">
    <el-button icon="Plus" type="primary" plain size="default" @click="add">新增</el-button>
    <el-button icon="Delete" type="danger" plain size="default" :disabled="ids.length === 0" @click="removes">删除</el-button>
    <el-table @selection-change="select" border class="table" :data="items">
      <el-table-column type="selection" align="center"></el-table-column>
#foreach($column in $columnData)
#if($column.propertyName != "createBy" &&
      $column.propertyName != "createTime" &&
      $column.propertyName != "updateBy" &&
      $column.propertyName != "updateTime")
#if($column.propertyName == "id")
      <el-table-column width="100px" label="ID" align="center" prop="id"></el-table-column>
#elseif($column.propertyName == "status")
      <el-table-column label="状态" align="center" width="100">
        <template #="scope">
          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="change(scope.row)"/>
        </template>
      </el-table-column>
#else
      <el-table-column label="$column.columnComment" align="center" prop="$column.propertyName" show-overflow-tooltip></el-table-column>
#end
#end
#end
      <el-table-column label="操作" width="280px" align="center">
        <template #="{ row }">
          <el-button type="primary" size="small" icon="Edit" @click="update(row)">编辑</el-button>
          <el-button type="primary" size="small" @click="remove(row)" icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="pageRequest.page.index"
        v-model:page-size="pageRequest.page.size"
        :page-sizes="[10, 20, 30, 50]"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="findPage"
        @size-change="findPage"/>
  </el-card>
  <el-drawer v-model="dialog">
    <template #header>
      <h4>{{ ${className}Params.id ? '更新${codeName}' : '添加${codeName}' }}</h4>
    </template>
    <template #default>
      <el-form :model="${className}Params" :rules="rules" ref="form" label-position="right" label-width="100px">
#foreach($column in $columnData)
#if($column.propertyName != "id" &&
        $column.propertyName != "createBy" &&
        $column.propertyName != "createTime" &&
        $column.propertyName != "updateBy" &&
        $column.propertyName != "updateTime")
#if($column.propertyName == "status")
        <el-form-item class="form-item" label="状态" style="width: 300px" prop="status">
          <el-radio-group v-model="${className}Params.$column.propertyName">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
#else
        <el-form-item class="form-item" label="$column.columnComment" style="width: 300px" prop="$column.propertyName">
          <el-input placeholder="请输入$column.columnComment" v-model="${className}Params.$column.propertyName"></el-input>
        </el-form-item>
#end
#end
#end
      </el-form>
    </template>
    <template #footer>
      <div class="drawer-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import {ref, onMounted, reactive, nextTick} from 'vue'
import {ElMessage} from 'element-plus'
import modal from "@/utils/modal.js"
import setting from "@/setting"

#if(${pathPrefix} && ${pathPrefix} != "")
import {AddOrUpdateApi, findPageApi, removeApi} from "@/api/${pathPrefix}/${lowerName}/index.js";
#else
import {AddOrUpdateApi, findPageApi, removeApi} from "@/api/${lowerName}/index.js";
#end

// 分页参数
const pageRequest = ref({
  page: { index: 1, size: 10 },
  model: {
    #foreach($column in $columnData)
#if($column.propertyName != "id" &&
    $column.propertyName != "createBy" &&
    $column.propertyName != "createTime" &&
    $column.propertyName != "updateBy" &&
    $column.propertyName != "updateTime")
#if($column.propertyName == "status")
$column.propertyName: '',
    #else
$column.propertyName: '',
    #end
#end
#end}
})

// 基础数据
const items = ref([])
const ids = ref([])
const total = ref(0)
const dialog = ref(false)
const form = ref()

// 对象数据
const ${className}Params = reactive({
    #foreach($column in $columnData)
#if($column.propertyName != "id" &&
    $column.propertyName != "createBy" &&
    $column.propertyName != "createTime" &&
    $column.propertyName != "updateBy" &&
    $column.propertyName != "updateTime")
#if($column.propertyName == "status")
$column.propertyName: 0,
    #else
$column.propertyName: '',
    #end
#end
#end

})

// 表单校验规则
const rules = {
#foreach($column in $columnData)
#if($column.propertyName != "id" &&
    $column.propertyName != "createBy" &&
    $column.propertyName != "createTime" &&
    $column.propertyName != "updateBy" &&
    $column.propertyName != "updateTime")
#if($column.required)
${column.propertyName}: [
  {
    required: true,
    trigger: 'blur',
    message: '请输入${column.columnComment}'
  }
]#if($foreach.hasNext),#end

#end
#end
#end
}

// 分页查询接口
const findPage = async (index = 1) => {
  pageRequest.value.page.index = index
  const result = await findPageApi(pageRequest.value)
  if (result.code === setting.SYSTEM_SUCCESS) {
    total.value = result.data.total
    items.value = result.data.items
  }
}

// 表格选择事件
const select = (value) => ids.value = value

// 搜索
const search = () => findPage()
// 重置
const reset = () => {
  pageRequest.value = {
    page: {index: 1, size: 10},
    model: {
    #foreach($column in $columnData)
#if($column.propertyName != "id" &&
    $column.propertyName != "createBy" &&
    $column.propertyName != "createTime" &&
    $column.propertyName != "updateBy" &&
    $column.propertyName != "updateTime")
#if($column.propertyName == "status")
$column.propertyName: '',
    #else
$column.propertyName: '',
    #end
#end
#end}
  };
  findPage();
}

// 新增操作
const add = () => {
  dialog.value = true
  Object.assign(${className}Params, {
    #foreach($column in $columnData)
#if($column.propertyName != "createBy" &&
    $column.propertyName != "createTime" &&
    $column.propertyName != "updateBy" &&
    $column.propertyName != "updateTime")
#if($column.propertyName == "status")
$column.propertyName: 0,
    #else
$column.propertyName: '',
    #end
#end
#end

  })
  //清空上一次表单校验错误结果
  nextTick(() => {
#foreach($column in $columnData)
#if($column.propertyName != "id" &&
    $column.propertyName != "createBy" &&
    $column.propertyName != "createTime" &&
    $column.propertyName != "updateBy" &&
    $column.propertyName != "updateTime")
#if($column.required)
    form.value.clearValidate('$column.propertyName');
#if($foreach.hasNext)
#end
#end
#end
#end
  })
}

// 更新操作
const update = (row) => {
  dialog.value = true
  Object.assign(${className}Params, row)
  //清空上一次表单校验错误结果
  nextTick(() => {
#foreach($column in $columnData)
#if($column.propertyName != "id" &&
    $column.propertyName != "createBy" &&
    $column.propertyName != "createTime" &&
    $column.propertyName != "updateBy" &&
    $column.propertyName != "updateTime")
#if($column.required)
    form.value.clearValidate('$column.propertyName');
#if($foreach.hasNext)
#end
#end
#end
#end
  })
}

// 保存操作
const save = async () => {
  await form.value.validate()
  const result = await AddOrUpdateApi(${className}Params)
  if (result.code === setting.SYSTEM_SUCCESS) {
    ElMessage.success(${className}Params.id ? '更新成功' : '添加成功')
    dialog.value = false
    await findPage(${className}Params.id ? pageRequest.value.page.index : 1)
  }
}

// 删除操作
const remove = async (row) => {
  await modal.confirm(`确认要删除编号为"${row.id}"的数据项吗？`)
  const result = await removeApi(row.id)
  if (result.code === setting.SYSTEM_SUCCESS) {
    ElMessage.success('删除成功')
    await findPage(items.value.length > 1 ? pageRequest.value.page.index : Math.max(1, pageRequest.value.page.index - 1))
  }
}

// 批量删除
const removes = async () => {
  const idList = ids.value.map(item => item.id).join(',')
  const result = await removeApi(idList)
  if (result.code === setting.SYSTEM_SUCCESS) {
    ElMessage.success('删除成功')
    await findPage(items.value.length > 1 ? pageRequest.value.page.index : Math.max(1, pageRequest.value.page.index - 1))
  }
}

// 状态修改
const change = async (row) => {
  try {
    const result = await AddOrUpdateApi(row)
    if (result.code === setting.SYSTEM_SUCCESS) {
      ElMessage.success('更新成功')
    }
  } catch {
    row.status = row.status === 1 ? 0 : 1
  }
}

onMounted(() => {
  findPage()
})
</script>

<style scoped>
.search-card {
  min-height: 80px;

  .search-form {
    margin-top: 15px;
  }
}

.table-card {
  margin: 10px 0;

  .table {
    margin: 10px 0;

    .form-item {
      width: 300px;
    }
  }
}

.drawer-footer {
  flex: auto;
}
</style>